@import "../../styles/mixins.scss";
@import "../../styles/animation.scss";
@import "../../styles/extends.scss";

.dark {
  @extend %container-dark;

  h2 {
    @extend %title-dark;
    @extend %section-title-dark;
  }

  ul {
    @apply text-myTheme-dark;
  }
}

.light {
  @extend %container-light;

  h2 {
    @extend %title-light;
    @extend %section-title-light;
  }

  ul {
    @apply text-slate-400
  }
}

.dark, .light {
  @extend %container;

  .title {
    @include shadow();
    @apply w-11/12;
  }

  .stack__section {
    @apply h-full
    w-full
    flex
    flex-col
    items-center
    justify-center
    gap-8;

    .stack__main,
    .stack__second {
      @include shadow();
      @apply w-full
      max-w-screen-2xl
      flex
      flex-col
      gap-8
      overflow-hidden;
  
      .stack__scroll {
        @apply w-max
        flex
        justify-start;
  
        ul {
          @include horizontal-scroll(120);
          @apply
          w-max
          h-max
          flex
          gap-10
          px-4;
  
          li {
            @include return-anim-duration-1000();
            @apply w-min
            h-max
            text-6xl
            xl:text-7xl
            font-myTitleFont
            uppercase
            font-black
            text-nowrap
            select-none
            m-0
            p-0;
  
            &:hover {
              @include anim-duration-500();
              @apply text-myTheme-accent
              scale-105
              cursor-default;
            }
          }
        }
      }
    }
  
    .stack__second {
      @apply gap-6
      mb-12;
  
      .stack__scroll {
        ul {
          @include horizontal-scroll(80);
          @apply gap-7
          px-2;
  
          li {
            @apply font-myTextFont
            font-bold
            text-3xl
            xl:text-4xl;
          }
        }
      }
    }
  }

}
